<template>
  <div class="app-member">
    <a class="member-logo" href="/"><img src="@/assets/logo/logo3.png"></a>
    <a class="member-back" href="/">
      <svg-icon class-name="arrow-back-left" icon-class="arrow-back-left" />
      <span class="txt">返回官网</span>
    </a>
    <div class="member-header">
      <h1>会员权益</h1>
      <ul class="member-rights">
        <li>
          <el-image style="width: 44px; height: 44px;" src="@/assets/images/member-rights/member.png" />
          <span>会员权益一</span>
        </li>
        <li>
          <el-image style="width: 44px; height: 44px;" src="@/assets/images/member-rights/member.png" />
          <span>会员权益一</span>
        </li>
        <li>
          <el-image style="width: 44px; height: 44px;" src="@/assets/images/member-rights/member.png" />
          <span>会员权益一</span>
        </li>
        <li>
          <el-image style="width: 44px; height: 44px;" src="@/assets/images/member-rights/member.png" />
          <span>会员权益一</span>
        </li>
      </ul>
    </div>
    <div class="set-meal">
      <h3>VIP套餐</h3>
      <div class="flex">
        <div v-for="item in mealList" :key="item.value" class="box" :class="{ on: mealType === item.value }"
          @click="handleMeal(item.value)">
          <div class="money">{{ item.money }}</div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="pay-type">
      <h3>支付方式</h3>
      <div class="flex">
        <div v-for="item in payTypeList" :key="item.value" class="box" :class="{ on: payType === item.value }"
          @click="handlePay(item.value)">
          <img style="width: 32px; height: 32px;" :src="item.icon" />
          <span class="content">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="submit-btn">
      <el-button type="primary" @click="handleSubmit">确认协议并支付</el-button>
      <el-checkbox v-model="checkAgreement" style="margin:0px 0px 25px 0px;">支付即表明同意<a
          class="link">《支付协议》</a></el-checkbox>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const payTypeList = ref([{
  label: '支付宝支付',
  value: 0,
  icon: '@/assets/images/member-rights/zfb.png',
}, {
  label: '微信支付',
  value: 1,
  icon: '@/assets/images/member-rights/wx.png',
}])
const payType = ref(0)

function handlePay(value) {
  payType.value = value
}

const mealList = ref([{
  money: '40.5元/季',
  content: '平均0.5元/天',
  value: 0,
}, {
  money: '180元/年',
  content: '平均15元/天',
  value: 1,
}])
const mealType = ref(0)

function handleMeal(value) {
  mealType.value = value
}

const checkAgreement = ref(false)

function handleSubmit() {
  if (!checkAgreement.value) {
    proxy.$modal.msgError("请先同意《用户协议》和《个人信息保护协议》")
    return
  }
}
</script>

<style lang="scss" scoped>
.member-header {
  background-color: #AA261D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 267px;

  h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 500;
  }
}

.member-logo {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 1;

  img {
    width: 153px;
    height: 53px;
  }
}

.member-back {
  display: flex;
  align-items: center;
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 1;

  .txt {
    color: #fff;
    font-size: 12px;
    margin-left: 5px;
  }
}

.member-rights {
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  height: 92px;
  padding: 24px;
  list-style: none;
  margin: 0;

  li {
    display: flex;
    align-items: center;
    margin-left: 48px;

    span {
      color: #323233;
      font-size: 18px;
      font-weight: 500;
      margin-left: 8px;
    }

    &:first-child {
      margin-left: 0;
    }
  }
}

.set-meal,
.pay-type {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 49px;

  h3 {
    color: #323233;
    font-size: 24px;
    font-weight: 500;
    margin: 0;
  }

  .box {
    background: transparent;
    border: 1px solid #DCDEE0;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 120px;
    margin-top: 24px;
    margin-left: 32px;

    &.on {
      background-color: #FFFFFF;
      border-color: #AA261D;
    }

    &:first-child {
      margin-left: 0;
    }
  }
}

.set-meal {
  .box {
    flex-direction: column;
  }

  .money {
    color: #e32429;
    font-size: 30px;
    font-weight: 500;
  }

  .content {
    color: #000;
    font-size: 16px;
    margin-top: 5px;
  }
}

.pay-type {
  .content {
    margin-left: 10px;
  }
}

.submit-btn {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 48px;

  .el-button {
    border-radius: 60px;
    font-size: 20px;
    font-weight: 500;
    height: 60px;
    width: 532px;
    margin-bottom: 20px;
  }
}

.link {
  color: #2A82E4;
}
</style>